<template>
  <view class="visitor-page">
    <u-form :model="formData" ref="formRef" :rules="rules">
      <!-- 访客姓名 -->
      <u-form-item label="访客姓名" prop="name" required>
        <u-input 
          v-model="formData.name"
          placeholder="请输入访客姓名"
          maxlength="20"
        ></u-input>
      </u-form-item>
      
      <!-- 联系电话 -->
      <u-form-item label="联系电话" prop="phone" required>
        <u-input 
          v-model="formData.phone"
          placeholder="请输入联系电话"
          type="number"
          maxlength="11"
        ></u-input>
      </u-form-item>
      
      <!-- 来访目的 -->
      <u-form-item label="来访目的" prop="purpose" required>
        <u-radio-group v-model="formData.purpose" placement="row">
          <u-radio name="visit" label="探亲访友"></u-radio>
          <u-radio name="delivery" label="快递配送"></u-radio>
          <u-radio name="service" label="维修服务"></u-radio>
          <u-radio name="business" label="商务拜访"></u-radio>
          <u-radio name="other" label="其他"></u-radio>
        </u-radio-group>
      </u-form-item>
      
      <!-- 其他目的说明 -->
      <u-form-item label="目的说明" prop="purposeDesc" v-if="formData.purpose === 'other'">
        <u-textarea
          v-model="formData.purposeDesc"
          placeholder="请详细说明来访目的"
          maxlength="200"
          show-word-limit
          height="80"
        ></u-textarea>
      </u-form-item>
      
      <!-- 被访人 -->
      <u-form-item label="被访人" prop="host" required>
        <u-input 
          v-model="formData.host"
          placeholder="请输入被访人姓名"
          maxlength="20"
        ></u-input>
      </u-form-item>
      
      <!-- 被访人电话 -->
      <u-form-item label="被访人电话" prop="hostPhone" required>
        <u-input 
          v-model="formData.hostPhone"
          placeholder="请输入被访人电话"
          type="number"
          maxlength="11"
        ></u-input>
      </u-form-item>
      
      <!-- 访问地址 -->
      <u-form-item label="访问地址" prop="address" required>
        <u-input 
          v-model="formData.address"
          placeholder="请输入访问地址（如：1栋2单元301室）"
          maxlength="50"
        ></u-input>
      </u-form-item>
      
      <!-- 来访时间 -->
      <u-form-item label="来访时间" prop="visitTime" required>
        <u-datetime-picker
          v-model="formData.visitTime"
          mode="datetime"
          :min-date="minDate"
          :max-date="maxDate"
          placeholder="请选择来访时间"
        ></u-datetime-picker>
      </u-form-item>
      
      <!-- 预计离开时间 -->
      <u-form-item label="预计离开时间" prop="leaveTime">
        <u-datetime-picker
          v-model="formData.leaveTime"
          mode="datetime"
          :min-date="formData.visitTime || minDate"
          :max-date="maxDate"
          placeholder="请选择预计离开时间"
        ></u-datetime-picker>
      </u-form-item>
      
      <!-- 车牌号 -->
      <u-form-item label="车牌号" prop="plateNumber">
        <u-input 
          v-model="formData.plateNumber"
          placeholder="请输入车牌号（如有车辆）"
          maxlength="10"
        ></u-input>
      </u-form-item>
      
      <!-- 备注 -->
      <u-form-item label="备注" prop="remark">
        <u-textarea
          v-model="formData.remark"
          placeholder="请输入备注信息"
          maxlength="200"
          show-word-limit
          height="80"
        ></u-textarea>
      </u-form-item>
    </u-form>
    
    <!-- 提交按钮 -->
    <view class="submit-section">
      <u-button 
        type="primary" 
        text="提交访客登记"
        :loading="submitting"
        @click="submitVisitor"
      ></u-button>
    </view>
    
    <!-- 我的访客记录 -->
    <view class="history-section">
      <u-card title="我的访客记录" :border="false">
        <view class="history-list">
          <view 
            v-for="item in visitorHistory" 
            :key="item.id"
            class="history-item"
            @click="viewDetail(item)"
          >
            <view class="history-content">
              <view class="history-header">
                <text class="history-name">{{ item.name }}</text>
                <u-tag :text="item.statusText" :type="item.statusType" size="mini"></u-tag>
              </view>
              <text class="history-time">来访时间：{{ item.visitTime }}</text>
              <text class="history-purpose">来访目的：{{ item.purpose }}</text>
              <text class="history-address">访问地址：{{ item.address }}</text>
            </view>
            <u-icon name="arrow-right" color="#999" size="16"></u-icon>
          </view>
        </view>
      </u-card>
    </view>
  </view>
</template>

<script setup>
/**
 * 访客管理页面
 * @author Wu.Liang
 * @date 2025-01-21
 */

import { ref, reactive, onMounted } from 'vue'

// 表单数据
const formData = reactive({
  name: '',
  phone: '',
  purpose: '',
  purposeDesc: '',
  host: '',
  hostPhone: '',
  address: '',
  visitTime: '',
  leaveTime: '',
  plateNumber: '',
  remark: ''
})

// 提交状态
const submitting = ref(false)

// 时间范围
const minDate = Date.now()
const maxDate = Date.now() + 7 * 24 * 60 * 60 * 1000 // 一周后

// 表单验证规则
const rules = reactive({
  name: {
    type: 'string',
    required: true,
    min: 2,
    max: 20,
    message: '访客姓名长度在2-20个字符之间'
  },
  phone: {
    type: 'string',
    required: true,
    pattern: /^1[3-9]\d{9}$/,
    message: '请输入正确的手机号'
  },
  purpose: {
    type: 'string',
    required: true,
    message: '请选择来访目的'
  },
  purposeDesc: {
    type: 'string',
    required: true,
    min: 5,
    max: 200,
    message: '目的说明长度在5-200个字符之间'
  },
  host: {
    type: 'string',
    required: true,
    min: 2,
    max: 20,
    message: '被访人姓名长度在2-20个字符之间'
  },
  hostPhone: {
    type: 'string',
    required: true,
    pattern: /^1[3-9]\d{9}$/,
    message: '请输入正确的被访人手机号'
  },
  address: {
    type: 'string',
    required: true,
    min: 5,
    max: 50,
    message: '访问地址长度在5-50个字符之间'
  },
  visitTime: {
    type: 'string',
    required: true,
    message: '请选择来访时间'
  }
})

// 访客历史记录
const visitorHistory = ref([
  {
    id: 1,
    name: '张三',
    visitTime: '2025-01-20 14:30',
    purpose: '探亲访友',
    address: '1栋2单元301室',
    statusText: '已进入',
    statusType: 'success'
  },
  {
    id: 2,
    name: '李四',
    visitTime: '2025-01-19 16:00',
    purpose: '快递配送',
    address: '2栋1单元502室',
    statusText: '已完成',
    statusType: 'info'
  },
  {
    id: 3,
    name: '王五',
    visitTime: '2025-01-18 10:00',
    purpose: '维修服务',
    address: '3栋3单元201室',
    statusText: '已取消',
    statusType: 'error'
  }
])

// 表单引用
const formRef = ref()

// 提交访客登记
const submitVisitor = async () => {
  try {
    submitting.value = true
    
    // 表单验证
    const valid = await formRef.value.validate()
    if (!valid) {
      return
    }
    
    // 构建提交数据
    const submitData = {
      ...formData,
      purposeText: getPurposeText(formData.purpose)
    }
    
    // 调用API提交
    console.log('提交访客登记数据', submitData)
    
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    uni.showToast({
      title: '访客登记成功',
      icon: 'success'
    })
    
    // 重置表单
    resetForm()
    
  } catch (error) {
    console.error('提交访客登记失败', error)
    uni.showToast({
      title: '提交失败，请重试',
      icon: 'error'
    })
  } finally {
    submitting.value = false
  }
}

// 获取目的文本
const getPurposeText = (purpose) => {
  const purposeMap = {
    visit: '探亲访友',
    delivery: '快递配送',
    service: '维修服务',
    business: '商务拜访',
    other: '其他'
  }
  return purposeMap[purpose] || '其他'
}

// 重置表单
const resetForm = () => {
  Object.assign(formData, {
    name: '',
    phone: '',
    purpose: '',
    purposeDesc: '',
    host: '',
    hostPhone: '',
    address: '',
    visitTime: '',
    leaveTime: '',
    plateNumber: '',
    remark: ''
  })
  formRef.value.resetFields()
}

// 查看详情
const viewDetail = (item) => {
  uni.navigateTo({
    url: `/pages/security/visitor-detail?id=${item.id}`
  })
}

// 页面加载时初始化数据
onMounted(() => {
  console.log('访客管理页面加载完成')
})
</script>

<style lang="scss" scoped>
.visitor-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 16px;
}

.submit-section {
  margin: 20px 0;
  padding: 0 16px;
}

.history-section {
  margin-top: 20px;
  
  :deep(.u-card) {
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

.history-list {
  .history-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .history-content {
      flex: 1;
      
      .history-header {
        display: flex;
        align-items: center;
        margin-bottom: 4px;
        
        .history-name {
          font-size: 16px;
          color: #333;
          font-weight: 500;
          margin-right: 8px;
        }
      }
      
      .history-time,
      .history-purpose,
      .history-address {
        display: block;
        font-size: 12px;
        color: #666;
        margin-bottom: 2px;
      }
    }
  }
}

// 表单样式优化
:deep(.u-form-item) {
  background: white;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 16px;
  
  .u-form-item__body {
    padding: 0;
  }
  
  .u-form-item__body__left {
    font-size: 14px;
    color: #333;
  }
}

:deep(.u-radio-group) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
</style> 